<template>
  <view class="wrap">
    <view class="modal u-flex">
      <view class="pic">
        <image src="https://uviewui.com/common/logo.png" mode="widthFix"></image>
      </view>
      <view class="userInfo u-flex-1">
        <view class="name">刘玉成</view>
        <view class="text">考勤</view>
      </view>
    </view>
    <view class="modal punch">
      <view class="u-flex">
        <view class="u-flex-1 time">
          <view>上班08:00</view>
          <view class="info">
            <u-icon class="blue" name="checkmark-circle-fill"></u-icon>
            07:45已打卡
          </view>
        </view>
        <view class="u-flex-1 time">
          <view>下班17:00</view>
          <view class="info">
            未打卡
          </view>
        </view>
      </view>
      <view class="punchOper">
        <view class="photo"></view>
        <view class="address u-m-t-20">
          <u-icon class="blue" name="checkmark-circle-fill"></u-icon>
          <text>已进入考勤范围：岚城乡平潭综合实验区万宝路1号</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        
      }
    },
    methods: {
        
    },
  }
</script>

<style lang="scss" scoped>
.wrap{
padding:20rpx;
height: calc(100vh - env(safe-area-inset-top) - env(safe-area-inset-bottom));
	background-color: rgb(240, 242, 244);
}
.modal{
  background: #fff;
  border-radius: 0.3em;
  padding:20rpx;
  margin-bottom:20rpx;
  .pic{
    height:100rpx;
    width: 100rpx;
    border-radius: 0.3em;
    margin-right:20rpx;
    image{
      width: 100%;
    }
  }
  .userInfo{
    .name{
      font-size:30rpx;
      color:#2979ff;
    }
    .text{
      font-size:22rpx;
      color:#999;
    }
  }
}
.blue{
	color:#2979FF !important;
}
.c999{
	color:#999;
}
.punch{
  .time{
    background: #f4f4f4;
    border-radius: 0.3em;
    padding:20rpx;
	margin:0 10rpx;
  }
  .info{
    font-size: 20rpx;
    color:#999;
  }
  .punchOper{
    padding:200rpx 20rpx;
    text-align: center;
    .photo{
      width:200rpx;
      height:200rpx;
      border-radius: 200rpx;
      background: rgba(0,0,0,0.8);
      display: inline-block;
      box-shadow: 0 5px 5px rgba(0,0,0,0.5);
    }
    .address{
      font-size:20rpx;
      color:#999;
    }
  }
}
</style>